<template>
    <div class="source">
        <van-nav-bar title="素材专区" left-arrow fixed @click-left="onClickLeft" />
        <van-list v-model="loadingPage" :finished="finished" :finished-text="list.length ? '没有更多了' : ''"
            @load="ajaxGoodList">
            <div v-if="finished && !list.length" class="empty-good">
                <van-empty description="暂无商品" />
            </div>
            <div class="source_list">
                <div class="source_list_item" v-for="item, index in list" :key="index" @click="getInviteFriend(item)">
                    <div class="source_list_item_left">
                        <img :src="item.icon" alt="">
                        <div>{{ item.title }}</div>
                    </div>
                    <img class="source_list_item_right" src="../../images/good-ceil-arrow.png" alt="">
                </div>
            </div>
        </van-list>

    </div>
</template>
<script>
import { CONFIG_MATERIAL_LIST } from '@/api/home';
export default {
    data() {
        return {
            list: [],
            page: 1,
            pageSize: 10,
            finished:false,
            loadingPage:false
        }
    },
    mounted() {
        this.list=[]
        localStorage.removeItem('sourceInfo')
        this.page_num=1
    },
    methods: {
        // 列表请求
        ajaxGoodList() {
            let params = {};
            params['page_num'] = this.page;
            params['page_size'] = this.pageSize;
            this.$http.get(CONFIG_MATERIAL_LIST, params)
                .then(res => {
                    const {
                        list
                    } = res.data;

                    if (list && list.length) {
                        this.page++;
                        this.list = this.list.concat(list);
                        // 加载状态结束
                        this.loadingPage = false;
                        if (list.length < this.pageSize) {
                            this.finished = true;
                        }
                    } else {
                        this.finished = true;
                    }
                })
        },
        onClickLeft() {
            this.$router.go(-1)
        },
        getInviteFriend(item) {
            // localStorage.setItem('sourceInfo', JSON.stringify(item));
            this.$router.push({
                path: "/source-info",
                query:{
                    id:item.id
                }
            });
        }
    }
}
</script>
<style scoped lang="scss">
.source {
    position: relative;
    min-height: 100vh;
    padding-top: 46px;
    background-color: #f4f4f4;
    // box-sizing: border-box;
    padding-bottom: calc(1.2rem + constant(safe-area-inset-bottom));
    padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.source_list {
    width: 95%;
    margin: .32rem auto;
    background-color: #fff;
    border-radius: 10px;

    .source_list_item {
        display: flex;
        align-items: center;
        padding: .16rem;
        box-sizing: border-box;

        .source_list_item_left {
            width: 93%;
            display: flex;
            align-items: center;

            img {
                width: .48rem;
                height: .48rem;
            }

            div {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: .28rem;
                color: #333333;
                line-height: .4rem;
                text-align: left;
                font-style: normal;
                margin-left: .2rem;
            }
        }

        .source_list_item_right {
            width: .32rem;
            height: .32rem;
        }
    }

}

::v-deep .van-nav-bar .van-icon {
    color: #333333;
}

::v-deep .van-nav-bar__arrow {
    font-size: 20px;
}

::v-deep .van-hairline--bottom::after {
    display: none;
}
</style>